<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <lg-button-list>
        <t-button @click="submit">新增</t-button>
        <t-button @click="submit">修改</t-button>
        <t-button @click="submit">删除</t-button>
        <t-button @click="submit">提交</t-button>
        <t-button @click="submit">确定</t-button>
        <t-button @click="submit">取消</t-button>
        <t-button @click="submit">审核</t-button>
      </lg-button-list>
    </t-card>
    <t-card header="设置属性">
      <div class="cpm-separator">规定显示数量（总数不超过3）：limit="3"</div>
      <lg-button-list limit="3">
        <t-button @click="submit">新增</t-button>
        <t-button @click="submit">修改</t-button>
        <t-button @click="submit">删除</t-button>
      </lg-button-list>

      <div class="cpm-separator">规定显示数量（总数超过3）：limit="3"</div>
      <lg-button-list limit="3">
        <t-button @click="submit">新增</t-button>
        <t-button @click="submit">修改</t-button>
        <t-button @click="submit">删除</t-button>
        <t-button @click="submit">提交</t-button>
        <t-button @click="submit">确定</t-button>
        <t-button @click="submit">取消</t-button>
        <t-button @click="submit">审核</t-button>
      </lg-button-list>
    </t-card>

    <t-card header="插槽">
      <div class="cpm-separator">触发器：trigger</div>
      <lg-button-list gap="0 8px">
        <div @click="submit">新增</div>
        <div @click="submit">修改</div>
        <div @click="submit">删除</div>
        <div @click="submit">提交</div>
        <div @click="submit">确定</div>
        <div @click="submit">取消</div>
        <div @click="submit">审核</div>
        <template #trigger><t-button>more</t-button></template>
      </lg-button-list>
    </t-card>

    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { LgButtonList } from '@/soar';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';

function submit(e) {
  console.log('点击了按钮', e);
}

const propsData = [
  { name: 'children', desc: '获取子元素，非必填', type: 'Function', def: '' },
  { name: 'limit', desc: '显示的按钮(子元素)数量，超过这个数量会放到更多下拉菜单', type: 'number | string', def: '2' },
];

const emitData = [
  // { name: 'initialized', desc: '组件初始化事件', param: 'string' },
];

const apiData = [
  // { name: 'code', desc: '字典code', type: 'string', sample: '' },
];

const slotData = [
  { name: 'default', desc: '默认，按钮列表', scope: '' },
  { name: 'trigger', desc: '更多下拉菜单触发元素', scope: '' },
];
</script>
